<route type="page" lang="json5">
{
  style: { navigationStyle: 'custom' }
}
</route>

<template>
  <!-- ,
permissionKeys: ['logined'] -->
  <!--下单页-->
  <view class="full-page" :style="{ paddingTop: safeArea.top + 'px', paddingBottom: safeArea.bottom + 'px' }">
    <wd-navbar title="确认订单" left-text="返回" left-arrow @click-left="handleClickLeft"></wd-navbar>
    <view class="order-header">
      <wd-form ref="orderForm" :model="memberUser">
        <view class="order-item">
          <wd-cell-group border>
            <wd-input
              label="下单用户"
              label-width="100px"
              prop="orderMember"
              v-model="memberUser"
              disabled
            />
            <wd-input
              label="联系方式"
              label-width="100px"
              prop="phone"
              clearable
                v-model="orderForm.orderContact"
              placeholder="请输入手机号"
            />
            <wd-picker :columns="pickItemColumns" label="取餐时间" v-model="orderForm.orderPickTime" />
          </wd-cell-group>
        </view>

        <view class="order-goods-list" v-if="cartNum > 0">
          <view
            class="shopping-cart-item"
            v-for="(item, index) in shoppingCartList"
            :key="index"
            style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ccc"
          >
            <view style="text-align: left">{{ item.goodsName }}</view>
            <view style="text-align: center">￥ {{ item.goodsPrice }} * {{ item.quantity }}</view>
            <view style="text-align: right">￥{{ item.goodsPrice * item.quantity }}</view>
          </view>
          <view class="order-sum" style="display: flex; justify-content: space-between; align-items: center">
            <view>总计</view>
            <view>￥{{ cartTotalPrice }}</view>
          </view>
        </view>

        <view class="order-remark">
          <wd-textarea style="height: 10%" v-model="orderForm.orderRemark" placeholder="请填写备注" />
        </view>

        <view class="order-pay-type">
          <wd-picker :columns="payTypeColumns" label="支付方式" v-model="orderForm.orderPayType" />
        </view>

        <view class="pay-btn">
          <wd-button custom-class="custom-pay-btn" @click="confirmOrder()">确认订单</wd-button>
        </view>
      </wd-form>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useShoppingCartStore } from '@/store/shoppingCart'
import { useUserStore } from '@/store'
import { WorkOrderVo } from '@/api/menu/shoppingCart'
import { OrderInfoForm } from '@/api/order/orderInfo'
import { confirmOrderApi } from '@/api/order/api'

// 定义安全区域信息的响应式变量
const safeArea = ref({
  top: 0,
  bottom: 0
})

const pickItemColumns = ref([
  {
    label: '立即取出',
    value: '0'
  }
])

const payTypeColumns = ref([
  {
    label: '微信',
    value: '0'
  },
  {
    label: '支付宝',
    value: '1'
  },
  {
    label: '银行卡',
    value: '2'
  }
])


const memberUser=ref('')

const orderForm = ref<OrderInfoForm>({
  orderMember: '',
  orderPrice: '',
  orderStatus: '',
  orderContact: '',
  orderPickTime: '',
  orderPayType: '',
  orderRemark: '',
  workOrders: []
})

onMounted(() => {
  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync()
  // 设置安全区域信息
  safeArea.value = {
    top: systemInfo.safeAreaInsets.top,
    bottom: systemInfo.safeAreaInsets.bottom
  }
  getShoppingCart()
  getUserStoreUser()
})

//缓存
const shoppingCartStore = useShoppingCartStore()
//购物车商品数量
const cartNum = ref<number>()
//购物车总价
const cartTotalPrice = ref<number | string>()
//商品列表
const shoppingCartList = ref<WorkOrderVo[]>([]) // 确保初始化为空数组

// 获取购物车商品列表
shoppingCartList.value = shoppingCartStore.getCartItems
// 获取购物车总数量
cartNum.value = shoppingCartStore.getCartTotalItems
//
cartTotalPrice.value = shoppingCartStore.getCartTotalPrice.toFixed(2)

//获取购物车信息
const getShoppingCart = () => {
  shoppingCartList.value = shoppingCartStore.getCartItems
  cartNum.value = shoppingCartStore.getCartTotalItems
  cartTotalPrice.value = shoppingCartStore.getCartTotalPrice
}

//获取当前用户信息
const userStore = useUserStore()
const getUserStoreUser = () => {
  orderForm.value.orderContact = userStore.getUserInfo().user.phonenumber
  orderForm.value.orderMember = userStore.getUserInfo().user.userId
  memberUser.value=userStore.getUserInfo().user.userName
}

function handleClickLeft() {
  uni.navigateBack()
}

//确认订单
const confirmOrder = () => {
  orderForm.value.workOrders = shoppingCartList.value
  orderForm.value.orderPrice = cartTotalPrice.value

  console.log(orderForm.value)
  confirmOrderApi(orderForm.value).then(res => {
    // 跳转
    console.log(res.data)
    const orderId = res.data
    // 当前页面跳转逻辑
    uni.navigateTo({
      url: '/pages/order/pick-up?orderId=' + orderId
    })
  })
}
</script>

<style lang="scss" scoped>
/* 去除默认边距 */
html,
body {
  margin: 0;
  padding: 0;
}

/* 设置根元素的背景颜色 */
.full-page {
  background-color: #fbece5;
  min-height: 100vh;
}

.order-header {
  .order-goods-list {
    padding: 20rpx;
    background-color: #fff;
    margin: 20rpx;

    .shopping-cart-item {
      margin: 20rpx;
    }
  }
}

.pay-btn {
  :deep() {
    .custom-pay-btn {
      width: 90%;
      margin: 5% 5% 0 5%;
      background-color: #dc4d6b;
    }
  }
}

.order-item {
  margin: 20rpx;
  height: 20%;
  border-radius: 10rpx;
}

.order-remark {
  margin: 20rpx;
}
</style>
